<template>
  <div class="container-sign">
    <div id="header">
      <van-col :span="24"
               id="headerTitle">
        <van-nav-bar title="绑定帐号" />
      </van-col>
    </div>
    <div id="midContainer">
      <van-col :span="24">
        <van-cell-group>
          <van-field v-model="requestParams.account"
                     clearable
                     label="帐号"
                     right-icon="question-o"
                     placeholder="请输入帐号"
                     left-icon="contact"
                     @click-right-icon="$toast('帐号不能为空')" />
          <van-field v-model="requestParams.password"
                     clearable
                     type="password"
                     label="密码"
                     right-icon="question-o"
                     placeholder="请输入密码"
                     left-icon="closed-eye"
                     @click-right-icon="$toast('密码必须是数字、字母、下划线')" />

        </van-cell-group>
      </van-col>
    </div>
    <div class="bottom">
      <van-col :span="24"
               id="buttonLayout">
        <van-button type="default"
                    @click="onCancel">取消</van-button>
        <van-button size="medium"
                    @click="onBindAccount"
                    type="info">绑定</van-button>
      </van-col>
    </div>
  </div>
</template>
<script>
import { Toast, Dialog } from 'vant';
import Vue from 'vue';
Vue.use(Toast, Dialog);
export default {
  data () {
    return {
      requestParams: {
        account: '',
        password: ''
      }
    }
  },
  methods: {
    onCancel () {//取消
      this.$toast("已取消");
    },
    onBindAccount (e, username, password) {//绑定帐号
      if (this.requestParams.account == '') {
        this.$toast("用户名不能为空");
        return false;
      }
      if (this.requestParams.password == '') {
        this.$toast("密码不能为空");
        return false;
      }
      else {
        this.$toast.success("绑定成功");
        // this.$toast('token='+token);
        var that = this // 放置指针，便于then操作的获取

        //   axios.get('接口地址', {
        //     params: {
        //       userName: this.username
        //     }
        //   }).then(function (response) {
        //     console.log(response);
        //     var reslutData = response;
        //     console.log(reslutData.data.status)
        //     if (reslutData.data.status == 1002) {
        //       this.$toast(reslutData.data.desc);
        //     }
        //     if (reslutData.data.status == 1000) {
        //       this.$toast(reslutData.data.desc);
        //       this.$router.push({
        //         path: '/receData',
        //         query: {
        //           reslutData
        //         }
        //       });
        //     }
        //   }.bind(this))
        //     .catch(function (error) {
        //       console.log("请求失败" + error);
        //     });
        //   e.preventDefault();
      }
    },
    //查看进度
    onLookPro () {
      this.$router.push('/mobileLookProgress')
    },
    //进度查询
    onProSearch () {
      this.$router.push('/lookPro')
    },
  },
  mounted () {
    // 切换页面时滚动条自动滚动到顶部
    window.scrollTo(0, 0);
  },
  created () {
    this.requestParams = this.$options.data().requestParams;
    // if (this.$route.query.row != undefined) {
    //   this.objRow = JSON.parse(this.$route.query.row)
    // }
  }
}
</script>
<style lang="scss" scoped>
.van-field__label {
  width: 2.2em;
}
.van-button--normal {
  padding: 0 15px;
  font-size: 14px;
  width: 20%;
  margin-right: 20px;
}
.van-button--info {
  color: #fff;
  // background-color: #1441b3 !important;
  // border: 1px solid #1441b3 !important;
  width: 20% !important;
}
#buttonLayout {
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  // width: 100%;
}
#midContainer {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
}
#headerTitle p {
  font-size: 18px;
  text-align: center;
}
#header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 46px !important;
  background: white;
  width: 100%;
}
#layoutStyle {
  background: white !important;
}
.van-col-left {
  background: white;
  margin-top: 16px;
  padding-bottom: 10px;
}
.van-col-left p {
  font-size: 14px;
  padding-left: 20px;
  padding-top: 10px;
  display: flex;
  flex-direction: row;
}
.van-col-left p span {
  display: block;
}
.van-col-left p span:nth-child(1) {
  color: #999999;
  width: 60px;
  text-align: right;
  margin-right: 12px;
}
.van-col-left p span:nth-child(2) {
  color: #333333;
}
#projectContent {
  font-size: 14px;
  padding-left: 20px;
  margin-top: 20px;
  padding-bottom: 14px;
}
.container-sign ::-webkit-scrollbar {
  display: none !important; //个人建议使用这个
}
.container-sign {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5 !important;
}
.bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 14vh;
  background: white;
  width: 100%;
}
</style>

